<template>
  <div>
    <div id='map'></div>

    <el-button type='primary' @click='add'>添加定位</el-button>

    <el-button type='primary' @click='clear'>清除坐标</el-button>

    <el-button type='primary' @click='addLine'>添加路线</el-button>

    <el-button type='primary' @click='clearLine'>清除路线</el-button>

    <el-button type='primary' @click='hidden'>隐藏</el-button>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'

export default {
  name: 'map-position',
  data() {
    return {
      map: undefined,
      marker: undefined,
      line: []
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      let map = new AMap.Map('map', {
        zoom: 10,//级别
        center: [116.397428, 39.90923],//中心点坐标
        viewMode: '2D'//使用3D视图
      })

      // 工具条控件;范围选择控件
      map.plugin(['AMap.ToolBar'], function() {
        map.addControl(new AMap.ToolBar())
      })

      // 比例尺条控件
      map.plugin(['AMap.Scale'], function() {
        map.addControl(new AMap.Scale())
      })

      //定位当前位置插件； 用来获取和展示用户主机所在的经纬度位置；
      map.plugin(['AMap.Geolocation'], function() {
        map.addControl(new AMap.Geolocation())
      })

      //鹰眼插件；在地图右下角显示地图的缩略图
      map.plugin(['AMap.OverView'], function() {
        map.addControl(new AMap.OverView())
      })

      //实现默认图层与卫星图、实施交通图层之间切换的控件
      map.plugin(['AMap.MapType'], function() {
        map.addControl(new AMap.MapType())
      })

      this.map = map
    },
    // 添加一个坐标定位，并移动至地图中心
    add() {
      this.marker = new AMap.Marker({
        position: new AMap.LngLat(112.95296, 28.22325),
        title: 'test',
        icon: new AMap.Icon({
          size: new AMap.Size(30, 30),
          image: require('@/assets/pic/start.png'),
          imageSize: new AMap.Size(30, 30),
          scaleFactor: 2,//地图放大一级的缩放比例系数
          maxScale: 2,//最大放大比例
          minScale: 1//最小放大比例
        })
      })

      // 标签内容
      let content = '<div style=\'background-color: aqua;padding: 5px;border-radius:5px;width:175px;font-size:10px;text-align: left\'>'
        + '<p>时间：2023-02-19 20:48:32  </p>'
        + '<p>设备IP:192.168.30.45</p>'
        + '<p>数据中心：车载数据中心</p>'
        + '<p>设备自编号： CA1000</p>'
        + '<p>车辆显示名:苏EA1092</p>'
        + '<p>设备类型: 发动机</p></div>'

      // 添加标签
      this.marker.setLabel({
        position: 'ML',
        offset: new AMap.Pixel(-230, 0),
        content: content
      })

      this.map.add(this.marker)
      this.map.setZoom(15)
      this.map.setCenter([112.95296, 28.22325])
    },
    // 清除坐标
    clear() {
      console.log(this.marker)
      //  this.map.remove(this.marker)
      this.marker.setVisible(false)
    },
    // 绘制一条轨迹线和一个坐标
    addLine() {
      let lineArr = [[116.478935, 39.997761], [116.478939, 39.997825], [116.478912, 39.998549], [116.478912, 39.998549], [116.478998, 39.998555], [116.478998, 39.998555], [116.479282, 39.99856], [116.479658, 39.998528], [116.480151, 39.998453], [116.480784, 39.998302], [116.480784, 39.998302], [116.481149, 39.998184], [116.481573, 39.997997], [116.481863, 39.997846], [116.482072, 39.997718], [116.482362, 39.997718], [116.483633, 39.998935], [116.48367, 39.998968], [116.484648, 39.999861]]

      let line = new AMap.Polyline({
        map: this.map,
        path: lineArr,
        showDir: true,
        dirColor: 'pink',
        strokeColor: '#0000aa',//线颜色
        strokeOpacity: 1,//线透明度
        strokeWeight: 6,//线宽
        strokeStyle: 'solid'//线样式
      })

      this.line.push(line)

      this.map.setFitView()

      this.marker = new AMap.Marker({
        position: [116.478935, 39.997761],
        icon: new AMap.Icon({
          size: new AMap.Size(60, 40),
          image: require('@/assets/pic/1.jpg'),
          imageSize: new AMap.Size(60, 40)
        }),
        visible: true,
        autoRotation: true,
        curosr: 'pointer',
        title: 'test',
        zindex: 300,
        offset: new AMap.Pixel(-30, -30)
      })

      let infoWindow = new AMap.InfoWindow({
        content: '<div>aaaaaaaaa</div>',
        offset: new AMap.Pixel(0, -30)
      })

      infoWindow.open(this.map, [116.478935, 39.997761])

      this.map.add(this.marker)

      this.map.setZoom(15)
      this.map.setCenter([116.478935, 39.997761])

    },
    // 清除路线
    clearLine() {
      this.map.remove(this.line)
    },
    hidden() {

    }
  }
}
</script>

<style scoped>
#map {
  width: 90%;
  height: 500px;
  margin: auto;
}

.el-button {
  margin-top: 10px;
}
</style>